<script setup lang="ts">

</script>

<template>
  <div>
    <ul class="container ">
      <li style="font-weight: bolder;">友情链接</li>
      <li class="Li"><a href="https://www.gov.cn/">中国政府网</a></li>
      <li class="Li"><a href="http://www.people.com.cn/">人民网</a></li>
      <li class="Li"><a href="https://sbj.cnipa.gov.cn/sbj/index.html">中国商标网</a></li>
      <li class="Li"><a href="https://www.xinhuanet.com/">新华网</a></li>
      <li class="Li"><a href="https://www.pku.edu.cn/">北京大学</a></li>
    </ul>
  </div>


  <div class="bottom">
    <div class="Logo">
      <img src="/src/assets/images/logo.png" style="width: 200px;height: 80px;margin-top: 50px; margin-left: 100px;"></img>
    </div>
    <div class="content">
      <ul style=" list-style-type:none;">
        <li  style="padding-bottom: 10px;font-weight: bolder;">热门导航</li>
        <li class="li" style="padding-bottom: 5px;">网站首页</li>
        <li class="li" style="padding-bottom: 5px;">爱情鲜花</li>
        <li class="li" style="padding-bottom: 5px;">订单查询</li>
        <li class="li" style="padding-bottom: 5px;">全部商品</li>
      </ul>
    </div>
    <div class="nei">
      <span style="width: 154px;height: 240px;background-color: white;" >
        <ul style=" list-style-type:none;">
          <li style="padding-bottom: 10px;font-weight: bolder;">客户服务</li>
          <li class="li" style="padding-bottom: 5px;">关于我们</li>
          <li class="li" style="padding-bottom: 5px;">服务声明</li>
          <li class="li" style="padding-bottom: 5px;">订花流程</li>
          <li class="li" style="padding-bottom: 5px;">支付方式</li>
        </ul>
      </span>
      <span style="width: 154px;height: 240px;background-color:white;">
        <ul style="margin-top: 50px;list-style-type:none;">
          <li class="li" style="padding-bottom: 5px;">配送说明</li>
          <li class="li" style="padding-bottom: 5px;">售后服务</li>
          <li class="li" style="padding-bottom: 5px;">隐私条款</li>
          <li class="li" style="padding-bottom: 5px;">联系我们</li>
        </ul>
      </span>
    </div>
    <div class="N">
      <ul style=" list-style-type:none;">
        <li style="padding-bottom: 10px;font-weight: bolder;">联系我们</li>
        <li class="li" style="padding-bottom: 5px;">意见反馈</li>
        <li class="li" style="padding-bottom: 5px;">工作时间：07:00-23:00</li>
        <li class="li" style="padding-bottom: 5px;">7*24小时在线订购</li>
        <li class="li" style="padding-bottom: 5px;">全国热线：400-060-1520</li>
      </ul>
    </div>
    <div class="wechat">
      <div style="text-align: center;">
      <img src="/src/assets/images/L4.jpg" style="width: 120px; height: 120px; margin-top: 10px;" >
      <div style="margin-top: 5px;">扫码关注微信</div>
  </div>
</div>
  </div>

  <div class="copyright">
    <ul style=" list-style-type:none;">
      <li style="padding-bottom: 10px;font-weight: bolder;">Copyright©2020  成都勿忘我科技有限公司</li>
      <li class="li" style="padding-bottom: 5px;"><a href="https://beian.miit.gov.cn/#/Integrated/index">蜀ICP备20016463号-2</a></li>
    </ul>
  </div>
</template>

<style scoped>
.container{
  width: 500px;
  height:20px;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin-left: 100px;
  line-height: 20px;

}

.Li:hover{
  color: blue;
  cursor: pointer;
  text-decoration: underline;
  
}
a {
    text-decoration: none;  /* 取消下划线 */
    color: inherit;         /* 继承父元素颜色 */
    cursor: pointer;        /* 保持指针样式 */
}



/*底部*/
.bottom{
  width: 100%; 
  height: 180px; 
  background-color:white; 
  display: flex;
  justify-content: space-between;
  margin-top: 50px;

}
.Logo{
  height: 180px;
  width: 310px;
  background-color: white;
  
}
.li:hover{
  color: blue;
  cursor: pointer;
  text-decoration: underline;
  
}
.content{
  height: 180px;
  width: 200px;
  background-color:white;
  text-align: center;
  border-right: 1px solid rgba(197, 138, 20, 0.997);
 
}
.nei{
  height: 180px;
  width: 310px;
  background-color: white;
  border-right: 1px solid rgba(197, 138, 20, 0.997);
  display: flex;
  justify-content: space-between;
}
.N{
   height: 180px;
  width: 310px;
  background-color:white;
}
.wechat{
   height: 180px;
  width: 310px;
  background-color: white;
  
  
}
.copyright{
  width: 400px;
  height: 100px;
  background-color:white;
  margin-left: 500px;
  margin-top: 40px;
  text-align: center;
}
</style>